<script>
  export default {
    data(){
      return{
        color:'red'
      }
    },
    //创建局部自定义指令
    directives:{
      // color:{
      //1：初始化节点后指令
      //   mounted(el,binding){
      //     el.style.background = binding.value
      //   },
      //2：更新节点后指令
      //   updated(el,binding){
      //     el.style.background = binding.value
      //   }
      // },
      //3：简写
      color:(el,binding) => {
         el.style.background = binding.value
      },
      //4：局部自定义指令
      // auth:(el,binding)=>{
      //   let auths = ['edit', 'delete']
      //   let ret = auths.includes(binding.value);
      //   if(!ret){
      //     el.style.display = 'none'
      //   }
      // }
    },
    methods:{
      handleClick(){
        this.color = 'blue'
      }
    }
  }

</script>

<template>
  <div>
    03_自定义指令.vue
    <div v-color="color" @click="handleClick">aaaaaaa</div>
    <button v-auth="'edit'">编辑</button>
  </div>
</template>

<style scoped>

</style>